.detail-box.stark-components {
    width: 960px;
    margin: 20px auto;
    background-color: #f9f9f9;
    position: relative
}

.detail-box.stark-components .path {
    padding-left: 20px;
    padding-top: 10px;
    font-size: 14px
}

.detail-box.stark-components .path a {
    color: #999;
    cursor: pointer;
    padding: 0 5px
}

.detail-box.stark-components > .col.s6 {
    padding: 20px
}

.detail-box.stark-components > .title {
    padding: 10px 10px 10px 20px;
    color: #000;
    font-size: 20px;
    font-weight: 600
}

.detail-box.stark-components .hr1 {
    border: none;
    border-top: 5px solid #ffc53d;
    width: 110px;
    display: inline-block;
    margin-left: 10px
}

.detail-box.stark-components .hr2 {
    display: inline-block;
    width: 830px;
    border: none;
    border-top: 2px solid #d9d9d9
}

.detail-box.stark-components > p {
    padding: 10px 20px;
    font-size: 16px
}

.detail-box.stark-components .item-name {
    /*font-size: 24px;*/
    /*padding: 10px;*/
    /*font-weight: 500*/
}

.detail-box.stark-components .item-price {
    font-size: 20px;
    padding: 10px;
    color: #EF5350;
    font-weight: 700
}

.detail-box.stark-components .publisher-info-title {
    color: #aaa;
    padding: 10px
}

.detail-box.stark-components .publisher-info-title hr {
    border: none;
    border-top: 1px solid;
    width: 200px;
    height: 1px;
    display: inline-block;
    margin-left: 5px;
    position: relative;
    top: -2px
}

.detail-box.stark-components .item-public-info {
    overflow: hidden
}

.detail-box.stark-components .item-public-info p {
    float: left;
    font-size: 16px;
    padding: 10px
}

.detail-box.stark-components .item-pub-time {
    padding: 10px;
    font-size: 14px;
    color: #999
}

.detail-box.stark-components .item-contact > div {
    overflow: hidden;
    padding: 10px
}

.detail-box.stark-components .item-contact .attr {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    float: left;
    color: #fff
}

.detail-box.stark-components .item-contact .attr i {
    font-size: 24px;
    line-height: 39px
}

.detail-box.stark-components .item-contact .value {
    float: left;
    font-size: 20px;
    line-height: 40px;
    margin-left: 15px
}

.detail-box.stark-components .item-contact .not-login {
    padding: 30px 20px 150px;
    font-size: 20px
}

.detail-box.stark-components .item-contact .not-login a {
    cursor: pointer;
    color: #EF5350
}

.detail-box.stark-components table td {
    padding: 5px 5px 5px 10px
}

.detail-box.stark-components table .attr > p {
    background-color: #26a69a;
    padding: 5px;
    text-align: center;
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

.detail-box.stark-components .edit-btn {
    position: absolute;
    bottom: 20px;
    right: 20px
}

.detail-box.stark-components .edit-btn:hover {
    background: #f55a4e !important
}

.detail-box.stark-components .section {
    line-height: 25px
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

.comment.stark-components > .col.s6 {
    padding: 20px
}

.comment.stark-components > .title {
    padding: 10px 10px 10px 20px;
    color: #000;
    font-size: 20px;
    font-weight: 600
}

.comment.stark-components .hr1 {
    border: none;
    border-top: 5px solid #ffc53d;
    width: 110px;
    display: inline-block;
    margin-left: 10px
}

.comment.stark-components .hr2 {
    display: inline-block;
    width: 830px;
    border: none;
    border-top: 2px solid #d9d9d9
}

.comment.stark-components .loading {
    padding: 20px 20px 20px 200px
}

.comment.stark-components .comment-item {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    line-height: 25px
}

.comment.stark-components .comment-item .name {
    color: #0bb9f8
}

.comment.stark-components .comment-item .time {
    font-size: 14px;
    color: #999
}

.comment.stark-components .comment-item .reply-or-delete {
    float: right;
    padding-right: 5px;
    display: none;
    cursor: pointer
}

.comment.stark-components .comment-item:hover .reply-or-delete {
    display: inline
}

.comment.stark-components .comment-reply {
    padding: 0 200px
}

.comment.stark-components .comment-add {
    position: relative;
    padding-left: 200px;
    padding-right: 200px;
    padding-bottom: 10px
}

.row.detail-area {
    width: 960px;
    margin: 20px auto;
    position: relative
}

.row.detail-area > .s12 {
    padding: 0 !important
}

.comment.stark-components .comment-add .comment-submit, .comment.stark-components .comment-reply .reply-submit {
    float: right
}

.comment.stark-components {
    width: 960px;
    background-color: #f9f9f9;
    position: relative;
    padding: 0 !important
}

.btn, .btn-floating, .btn-large, .card, .card-panel, .collapsible, .dropdown-content, .side-nav, .toast, .z-depth-1, nav {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

.btn-floating:hover, .btn-large:hover, .btn:hover, .z-depth-1-half {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)
}
blockquote, body, button, dd, dl, dt, fieldset, h1, h2, h3, h4, h5, h6, hr, input, lengend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0
}
.base-blue {
    background-color: #ffc53d !important
}
.blue.lighten-1 {
    background-color: #ffc53d !important
}
.btn, .btn-flat, .btn-large, .waves-effect, a {
    -webkit-tap-highlight-color: transparent;
}

.btn, .btn-large {
    text-decoration: none;
    color: #fff;
    background-color: #0bb9f8;
    letter-spacing: .5px;
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    -ms-transition: .2s ease-out;
    transition: .2s ease-out;
    cursor: pointer
}

.btn-large:hover, .btn:hover {
    background-color: #24c0f9
}

.detail-box.stark-components .item-pub-time {
    padding: 10px;
    font-size: 14px;
    color: #999
}

.input-field {
    position: relative;
    margin-top: 1rem;
    width: 380px;
}

.input-field input .btn {
    height: 40px;
    width: 100px;
    margin-bottom: 8px;
}

.input-field label {
    color: #9e9e9e;
    position: absolute;
    top: .8rem;
    left: .75rem;
    font-size: 1rem;
    cursor: text;
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    -ms-transition: .2s ease-out;
    transition: .2s ease-out
}

.input-field label.active {
    font-size: .8rem;
    -webkit-transform: translateY(-140%);
    -moz-transform: translateY(-140%);
    -ms-transform: translateY(-140%);
    -o-transform: translateY(-140%);
    transform: translateY(-140%)
}

.input-field .prefix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    -o-transition: color .2s;
    -ms-transition: color .2s;
    transition: color .2s
}

.input-field .prefix.active {
    color: #ffc53d
}

.btn, .btn-large {
    text-decoration: none;
    color: #fff;
    background-color: #ffc53d;
    letter-spacing: .5px;
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    -ms-transition: .2s ease-out;
    transition: .2s ease-out;
    cursor: pointer
}

.btn-large:hover, .btn:hover {
    background-color: #ffc53d
}

.input-field .prefix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    -o-transition: color .2s;
    -ms-transition: color .2s;
    transition: color .2s
}

.input-field .prefix.active {
    color: #ffc53d
}

.input-field .prefix ~ input, .input-field .prefix ~ textarea {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem)
}

.input-field .prefix ~ textarea {
    padding-top: .8rem
}

.input-field .prefix ~ label {
    margin-left: 3rem
}
.iconfont, address, cite, dfn, em, var {
    font-style: normal
}

h1 {
    font-size: 18px
}

h2 {
    font-size: 16px
}

h3 {
    font-size: 14px
}

button, h4, h5, h6, input, select, textarea {
    font-size: 100%
}

code, kbd, pre, samp, tt {
    font-family: "Courier New", Courier, monospace
}

small {
    font-size: 12px
}

a {
    text-decoration: none
}

abbr[title], acronym[title] {
    border-bottom: 1px dotted;
    cursor: help
}

q:after, q:before {
    content: ''
}

legend {
    color: #000
}

hr {
    height: 1px
}

html {
    overflow-y: scroll
}

body, button, input, select, textarea {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif !important;
    height: 100%;
    background: #eee
}


